<nz-layout>
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed">
    <div class="logo">
    </div>
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
      <li nz-submenu>
        <span title><i class="anticon anticon-user"></i><span class="nav-text">User</span></span>
        <ul>
          <li nz-menu-item>Tom</li>
          <li nz-menu-item>Bill</li>
          <li nz-menu-item>Alex</li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i class="anticon anticon-team"></i><span class="nav-text">Team</span></span>
        <ul>
          <li nz-menu-item>Team 1</li>
          <li nz-menu-item>Team 2</li>
        </ul>
      </li>
      <li nz-menu-item><span><i class="anticon anticon-file"></i><span class="nav-text">File</span></span>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header style="background: #fff; padding:0;"></nz-header>
    <nz-content style="margin:0 16px;">
      <nz-breadcrumb style="margin:12px 0;">
        <nz-breadcrumb-item>User</nz-breadcrumb-item>
        <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
      </nz-breadcrumb>
      <div style="padding:24px; background: #fff; min-height: 360px;">

        <form nz-form [formGroup]="validateForm" class="ant-advanced-search-form">
          <div nz-row [nzGutter]="40">
            <div nz-col [nzSpan]="8" *ngFor="let control of controlArray" [style.display]="control.show?'block':'none'">
              <div nz-form-item nz-row>
                <div nz-form-label nz-col [nzSpan]="5">
                  <label [attr.for]="'field'+control.index">Field {{control.index}}</label>
                </div>
                <div nz-form-control nz-col [nzSpan]="19">
                  <nz-input [nzSize]="'large'" [nzPlaceHolder]="'placeholder'" [formControlName]="'field'+control.index" [nzId]="'field'+control.index"></nz-input>
                </div>
              </div>
            </div>
          </div>
          <div nz-row>
            <div nz-col [nzSpan]="24" style="text-align: right;">
              <button nz-button [nzType]="'primary'">Search</button>
              <button nz-button (click)="resetForm()">Clear</button>
              <a style="margin-left:8px;font-size:12px;" (click)="toggleCollapse()">
                    Collapse
                    <i class="anticon" [class.anticon-down]="isCollapse" [class.anticon-up]="!isCollapse"></i>
                  </a>
            </div>
          </div>
        </form>
        <div class="search-result-list">
          Search Result List
        </div>

        Bill is a cat.
      </div>

    </nz-content>
    <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
  </nz-layout>
</nz-layout>